<template>
  <el-form-item
    label="上传附件"
    prop="附件"
    class="item"
    label-width="120px"
    style="width:100%"
  >
  <!-- :on-change="changeFile" -->
    <el-upload
      ref="upload"
      action="#"
      multiple
      accept=".jpg,.jpeg,.png,.bmp,.pdf,.JPG,.JPEG,.PBG,.BMP,.PDF"
      :disabled="oldFileList.length >= 1"
      :limit="1"
      :before-upload="beforeAvatarUpload"
      :with-credentials="true"
      :http-request="httpRequest"
      :show-file-list="false"
      class="upload-btn-box"

    >
      <el-button
        slot="trigger"
        type="primary"
        :disabled="oldFileList.length >= 1"
      >
        <el-icon class="el-icon--upload">
          <el-icon-upload-filled />
        </el-icon>上传文件
      </el-button>
      <div
        slot="tip"
        class="el-upload__tip"
        style="display: inline-block;"
      >支持pdf/word，小于50M</div>
    </el-upload>
    <div
      slot="file"
      style="text-align: left;width: 70%"
    >
      <div
        v-for="(item,index) in oldFileList"
        :key="index"
        class="item"
        @mouseover="changeStyle(index)"
        @mouseleave="changeStyle2(index)"
      >
        <div class="item_name_box">
          <a class="item_name">
            <el-icon>
              <Document />
            </el-icon>{{ item.name }}
          </a>
          <div class="item_anniu">
            <a
              class="icon_close"
              @click="downFile(index)"
            >
              <el-icon>
                <Download />
              </el-icon>
            </a>
            <a
              class="icon_close2"
              @click="deleteFile(index)"
            >
              <el-icon>
                <Close />
              </el-icon>
            </a>
          </div>
        </div>
        <el-progress
          v-if="item.percentage != 100"
          :percentage="item.percentage"
        />
      </div>
    </div>
  </el-form-item>
</template>

<script setup>
import { Document, Close, Download } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { ref, watch } from "vue";
import { xhrFile, saveAs } from "./downFile";
import api from "@/api/index";
const props = defineProps({
  fileList: {
    type: Array,
    default: [],
  },
});

const upload = ref();
const dataList = ref([]);
const oldFileList = ref([]);
const emit = defineEmits(["on-submit"]);

const beforeAvatarUpload = (file) => {
  let isTrue = true;
  if (oldFileList.value.length > 0) {
    oldFileList.value.forEach((item) => {
      if (item.fileName === file.name) {
        ElMessage.error("不能重复上传");
        isTrue = false;
      }
    });
  }
  if (!isTrue) return false;
  const isLt50M = file.size / 1024 / 1024 < 50;
  if (!isLt50M) {
    ElMessage.error("文件大小不能超过50MB!");
  }
  return isLt50M;
};

const callback = (val) => {
  let num = ((val.loaded / val.total) * 100) | 0; //百分比
};

const httpRequest = (param) => {
  let fileObj = param.file; // 相当于input里取得的files
  let fd = new FormData(); // FormData 对象
  const newObj = {
    name: param.file.name,
    url: "",
    percentage: 0,
  };
  oldFileList.value.push(newObj);
  fd.append("file", fileObj);
  api.publicApi
    .exportFile(fd, (val) => {
        oldFileList.value.forEach((item)=>{
            if(item.name === param.file.name){
                item.percentage = val;
            }
        })
    })
    .then((res) => {
      oldFileList.value.forEach((item) => {
        if (item.name === res.fileName) {
          item.name =  res.fileName
          item.url =  res.fileUrl
          item.fileUrl =  res.fileUrl
          item.fileName =  res.fileName
          item.percentage =  100
        }
      });
      emit("on-submit", oldFileList.value);
      upload.value.clearFiles();
    });
};

const changeStyle = (index) => {
  oldFileList.value.forEach((item) => {
    item.showClose = false;
  });
  oldFileList.value[index].showClose = true;
};

const changeStyle2 = (index) => {
  oldFileList.value[index].showClose = false;
};

const deleteFile = (index) => {
  oldFileList.value.splice(index, 1);
};

const beforeUpload = (file) => {
  console.log(file);
};

const downFile = (index) => {
  xhrFile(oldFileList.value[index].url).then((blob) => {
    saveAs(blob, oldFileList.value[index].name);
  });
};

watch(
  () => props.fileList,
  (newVal) => {
    if (newVal) {
      oldFileList.value = [...props.fileList];
      oldFileList.value.forEach((item) => {
        item.percentage = 100;
      });
    }
  },
  { immediate: true }
);
</script>
<style lang="scss">
.upload-btn-box {
  .el-upload {
  text-align: left;
}
}
</style>
<style lang="scss" scoped>

.item .el-form-item__label {
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #6b728a;
}
.fileListBox {
  text-align: left;
}
.item {
  margin-top: 10px;
  .el-form-item__content {
    display: block;
  }
  .item_name_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .item_name {
      color: var(--el-text-color-regular);
      display: block;
      margin-right: 40px;
      overflow: hidden;
      padding-left: 4px;
      text-overflow: ellipsis;
      transition: color var(--el-transition-duration);
      white-space: nowrap;
      font-size: 14px;
      line-height: 1.8;
      width: calc(100% - 40px);
      .el-icon {
        margin-right: 12px;
        color: var(--el-text-color-secondary);
      }
    }
    .item_anniu {
      width: 40px;
    }
    .icon_close {
      cursor: pointer;
      opacity: 0.75;
      color: var(--el-text-color-regular);
    }
    .icon_close2 {
      cursor: pointer;
      opacity: 0.75;
      margin-left: 5px;
      color: var(--el-text-color-regular);
    }
  }
}
</style>
